<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				background: #f5f5f5;
				color: #333333;
			}
			.main{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 18vw;
			}
			.main1{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.content{
				width: 86.5%;
				display: flex;
				flex-direction: row;
			    margin-top: 3.6vw;
				padding: 3.2vw;
				background: white;
				border-radius: 3.2vw;
			}
			/* 图片自适应 */
			.jfK1{
			  width: 42%;
			  overflow: hidden;
			  position: relative;
			  margin-right: 3.2vw;
			}
			.jfK1 .jfImg1{
			  width: 100%;
			  padding-top: 100%;
			  overflow: hidden;
			  background-position: center center;
			  background-repeat: no-repeat;
			  background-size: cover;
			  -webkit-background-size: cover;
			  -moz-background-size: cover;
			} 
			.goodsInfo{
				width: 87.2%;
				background: white;
				display: flex;
				flex-direction: column;
			}
			.goodsInfo>div:nth-child(1){
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.goodsInfo>div:nth-child(2){
				flex: 1;
				color: #999999;
				font-size: 3.2vw;
				margin-top: 1vw;
			}
			.goodsInfo>div:nth-child(3){
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
			.phone{
				width: 87.2%;
				background: white;
				margin-top: 3.2vw;
				padding: 3%;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1px solid #f2f2f2;
				display: none
			}
			.phone>div:nth-child(1){
				width: 2vw;
				height: 2vw;
				background: #FF4443;
				border-radius: 10vw;
				margin-right: 2vw;
			}
			.phone input{
				margin-left: 7vw;
				border: none;
				outline: none;
			}
			.tit{
				width: 87.2%;
				background: white;
				margin-top: 3.2vw;
				padding: 3%;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1px solid #f2f2f2;
			}
			.tit>div:nth-child(1){
				width: 2vw;
				height: 2vw;
				background: #FF4443;
				border-radius: 10vw;
				margin-right: 2vw;
			}
			.titContent{
				width: 87.2%;
				background: white;
				padding: 3%;
			}
			.img11{
				width: 93%;
			}
			.xqimg{
				width: 100%;
			}
			.myBottom{
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
			}
			.goumai{
				width: 100%;
				background: white;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.goumai .goumaiBtn{
				width: 80%;
				margin: 2vw 0;
				padding: 2vw 0;
				background: #FF4443;
				color: white;
				text-align: center;
				border-radius: 20vw;
			}
			.loading{
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.1);
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="loading">
				<img src="../imgs/loading-2.gif" >
			</div>
			<script type="text/html" id="main1">
				<div class="content">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url({{fileUrl}})"></div>
					</div>
					<div class="goodsInfo">
						<div>{{productName}}</div>
						<div>可全额兑换香辣鸡腿一个</div>
						<div>
							<!-- <span>原价150</span> -->
							<div style="color: #ECB751;">
								{{if amount > 0}}{{amount}}元{{if amount2 > 0}}+{{/if}}{{/if}}{{if amount2 > 0}}{{amount2}}积分{{/if}}
								{{if amount == 0 && amount2 == 0}}免费领取{{/if}}
							</div>
							<div style="font-size: 3vw;">剩余库存：{{maxCoupons-distributedCoupons}}</div>
						</div>
					</div>
				</div>
				<div class="phone">
					<div></div>
					<div>手机号</div>
					<input type="number" id="phone" placeholder="请输入手机号"/>
				</div>
				<div class="tit">
					<div></div>
					<div>活动须知</div>
				</div>
				<div class="titContent">{{description}}</div>
			</script>
			<div class="main1"></div>
			<script type="text/html" id="img11">
				{{each}}
					<img class="xqimg" src="{{$value.fileUrl}}">
				{{/each}}
			</script>
			<div class="img11"></div>
			<!-- <img class="xqimg" src="../imgs/123123a.jpg"> -->
			<div class="myBottom">
				<div class="goumai">
					<div class="goumaiBtn">兑换</div>
				</div>
			</div>
		</div>
		<!-- <div class="main">
			<div class='jfK1'>
				<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
			</div>
			<div class="goodsInfo">
				<div>
					<div style="color: #ff4443;">109.00<span>原价150</span></div>
					<div style="font-size: 3vw;">剩余库存：99</div>
				</div>
				<div>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div>
			</div>
			<div class="tit">
				<div></div>
				<div>活动须知</div>
			</div>
			<div class="titContent">活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知活动须知</div>
			<img class="xqimg" src="../imgs/123123a.jpg">
			<div class="goumai">
				<div class="goumaiBtn">购买</div>
			</div>
		</div> -->
		<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		$(function(){
			//console.log(localStorage.getItem('user'));
			var productType=null
			var flag=true
			$('.loading').hide()
			$('.phone').css("display","none");
			function GetQueryString(name)
			{
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null)return  unescape(r[2]); return null;
			}
			console.log(GetQueryString("id"))
			myAjax('get','/api/purchase/getEquityCardDetail/'+GetQueryString("id"),{},function(res){
				
				if(res.code==200){
					var html = template('main1',res.data);
					$(".main1").append(html);
					var html1 = template('img11',res.data.fileList);
					$(".img11").append(html1);
					productType=res.data.productType
					if(productType==7){//flex
						//$('.phone').show()
						$('.phone').css("display","flex");
					}
				}else{
					alert(res.data)
				}
			})
			$('.main').on('click','.goumaiBtn',function(){
				var arr={}
				var reg_tel=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;//手机号正则
				if(productType==7){//判断是否需要填写手机号
					if(!$('#phone').val()){
						alert('请填写手机号！')
						return false
					}else{
						if(!(reg_tel.test($('#phone').val()))){
							alert("请正确填写您的手机号码！");
							return false
						}else{
							arr.rechargeAccount=$('#phone').val()
						}
					}
				}
				
				if(!flag){
					return false
				}
				flag=false
				$('.loading').show()
				//console.log(arr)
				myAjax('get','/api/purchase/exposerUrl',{productId:GetQueryString("id")},function(res){
					if(res.code==200){
						arr.md5=res.data
						myAjax('get','/api/alipay/buyProduct/'+GetQueryString("id"),arr,function(res1){
							if(res1.code==200){
								if(productType==7){//flex
									var url = res1.data.qrCode;
									if (url) {
										// window.open(url)
										window.location.href = url;
									} else {
										alert('兑换成功！')
									}
								}else{
									alert('兑换成功，请到支付宝卡包查看已兑换成功的券！')
									window.location.href = "alipays://platformapi/startapp?appId=20000021&a=lb&b=c";
								}
							}else{
								alert(res1.data)
							}
						})
					}else{
						alert(res.data)
					}
					flag=true
					$('.loading').hide()
				})
			})
		})
	</script>
</html>
